<template>
    <div class="max-w-md mx-auto rounded-md overflow-hidden shadow-md hover:shadow-lg" @click="handleToPage">
        <div class="relative overflow-hidden">
            <img class="w-full ease-out duration-500 hover:scale-150" :src="pic" alt="Product Image">
            <div class="absolute top-0 left-0 p-1" v-if="isNew">
                <el-tag type="success" effect="dark">最近上新</el-tag>
            </div>
            <div class="absolute top-0 right-0 flex gap-1 p-1">
                <el-tag type="danger" effect="dark">{{ type }}</el-tag>
                <el-tag type="warning" effect="dark">会员免费</el-tag>
            </div>
        </div>
        <div class="p-4">
            <h3 class="text-lg font-bold mb-2 truncate ">{{ title }}</h3>
            <p class="text-gray-600 text-sm mb-4 line-clamp-3 ">{{ description }}</p>
            <div class="max-w-48">
                <p class="text-gray-400 text-xs mb-2 truncate">技术栈 · {{ useTechnology }}</p>

            </div>
            <p class="text-gray-400 text-xs mb-2">销量 · {{ salesVolume }}</p>
            <div class="flex items-center justify-between">
                <span class="font-bold text-lg text-red-500">￥{{ price }} <del class="text-sm text-gray-600 font-light">￥{{
                    oldPrice
                }}</del>
                </span>
                <cartAndPayBtn />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import cartAndPayBtn from './payment/cartAndPayBtn.vue';
type Props = {
    item: TProject
}
const props = defineProps<Props>();
const { id, title, description, pic, type, useTechnology, salesVolume, price, oldPrice, isNew } = props.item;
const router = useRouter();

const handleToPage = () => {
    router.push(`/front/productDetail/${id}`);
}
</script>

<style scoped></style>